@(stop: Stop)

@main("ITRACT: Stop") {
    <p>Stops Name: @stop.stop_name</p>
    <p>
        <a href="javascript:void(0);" onclick="toggleStreetView();">
            <div id="thumbnail">
                <img src="http://maps.googleapis.com/maps/api/streetview?location=@stop.stop_lat,@stop.stop_lon&amp;size=300x150&amp;fov=90&amp;sensor=false" style="height: 150px; width: 300px;" />
            </div>
        </a>
    </p>
    <p>
        <h3>Technical info for testing</h3>
        <p>stop_id: @stop.stop_id</p>
        <p>stop_lat: @stop.stop_lat</p>
        <p>stop_lon: @stop.stop_lon</p>
        @if( stop.findStopTimes().get(0).findNextStop() != null ){
            <p>next stop: @stop.findStopTimes().get(0).findNextStop();</p>
        }
    </p>
    <ul class="content">
    @for( stop_time <- stop.findStopTimes() ) {
        <li>
            @stop_time.departure_time, 
            going to @stop_time.findTrip().trip_headsign, 
            by @stop_time.findTrip().findRoute().route_short_name bus
        </li>
    }
    </ul>

<script>
  var directionsDisplay;
  var directionsService = new google.maps.DirectionsService();
  var latlng;
  var latlngNext;
  var map;
  function initialize() {
    latlng = new google.maps.LatLng(@stop.stop_lat, @stop.stop_lon);
    latlngNext = new google.maps.LatLng(@stop.findStopTimes().get(0).findNextStop().stop_lat, @stop.findStopTimes().get(0).findNextStop().stop_lon);

    directionsDisplay = new google.maps.DirectionsRenderer();
    var mapOptions = {
      zoom: 16,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById('map'),
        mapOptions); 
    directionsDisplay.setMap(map);

    panorama = map.getStreetView();
    panorama.setPosition(latlng);

    var service = new google.maps.StreetViewService;
    service.getPanoramaByLocation(panorama.getPosition(), 50, function(panoData) {
      var panoCenter = panoData.location.latLng;
      var heading = google.maps.geometry.spherical.computeHeading(panoCenter, latlng);
      var pov = panorama.getPov();
      pov.heading = heading;
      panorama.setPov(pov);
    });
    getDirections();
  }
  function getDirections(){
      var request = {
            origin: latlng,
            destination: latlngNext,
            optimizeWaypoints: true,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
      };
      directionsService.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
          }
      });
  }
  
  function toggleStreetView() {
    var toggle = panorama.getVisible();
    if (toggle == false) {
      panorama.setVisible(true);
    } else {
      panorama.setVisible(false);
    }
  }
  
  function loadScript() {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyAWJ07uerWGohWPKVENXrLsFpas0KI38KU&sensor=false&' +
        'callback=initialize';
    document.body.appendChild(script);
  }
  
  google.maps.event.addDomListener(window, 'load', initialize);
</script>
}